<template>
  <el-card class="box-card">
    <div class="formbox">
      <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="120px" status-icon>
      <el-form-item label="企业名称" prop="name">
        <el-input v-model="form.name" placeholder="企业名称" clearable/>
      </el-form-item>
      <el-form-item label="企业所在地" prop="citylist">
        <el-cascader :options="regionData" v-model="form.citylist" clearable filterable :props="{value:'id',label:'name'}" style="width: 100%;"/>
      </el-form-item>
      <el-form-item prop="detail_address">
        <el-input
          style="padding-top: 10px;"
          v-model="form.detail_address"
          clearable
          :rows="3"
          type="textarea"
          placeholder="详细地址"
        />
      </el-form-item>
      <el-form-item label="所属行业" prop="industry_id">
        <el-select v-model="form.industry_id" class="m-2" placeholder="所属行业" size="large" style="width: 100%;">
        <el-option
          v-for="item in industry"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      </el-form-item>
      <el-form-item label="企业经纬度" required>
        <el-col :span="7">
          <el-form-item prop="lat">
            <el-input v-model="form.lat" placeholder="纬度值" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
            <el-form-item prop="lng">
              <el-input v-model="form.lng" placeholder="经度值" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
        <el-col :span="8">
          <el-form-item prop="range">
            <el-input v-model="form.range" placeholder="半径范围(米)" clearable/>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item prop="value1" label="上,下班时间">
        <el-time-picker
          v-model="form.value1"
          style="width: 100%;"
          is-range
          format="HH:mm"
          value-format="HH:mm"
          range-separator="-"
          start-placeholder="上班时间"
          end-placeholder="下班时间"
        />
      </el-form-item>
      <el-form-item label="休班类型">
        <el-radio-group v-model="form.week_type" class="ml-4">
          <el-radio :label="1" size="large">单休</el-radio>
          <el-radio :label="2" size="large">双休</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否跳过法定节假日" label-width="150" >
        <el-radio-group v-model="form.skip_holiday" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="2" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="主要负责人" required>
        <div class="flex">
          <el-form-item prop="charge_name" style="width: 49%;"><el-input clearable v-model="form.charge_name" placeholder="姓名" /><span></span></el-form-item>
          <el-form-item prop="charge_phone" style="width: 49%;"><el-input clearable v-model="form.charge_phone" placeholder="联系方式" /></el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="安全负责人" required>
        <div class="flex">
          <el-form-item prop="charge_safety_name" style="width: 49%;"><el-input clearable v-model="form.charge_safety_name" placeholder="姓名" /><span></span></el-form-item>
          <el-form-item prop="charge_safety_phone" style="width: 49%;"><el-input clearable v-model="form.charge_safety_phone" placeholder="联系方式" /></el-form-item>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="formBtnbox">
          <el-button type="primary" @click="onSubmit(ruleFormRef)">保 存</el-button>
          <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
        </div>
      </el-form-item>
    </el-form>
    </div>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { getCommonRegion, getCommonIndustry } from '@/API/user'
import useCurrentInstance from '@/utils/useCurrentInstance'

const { proxy } = useCurrentInstance()
let industry = ref([])
let regionData = ref([])

const form = reactive({
  name: '',
  work_time: '',
  after_work_time: '',
  week_type:2,
  skip_holiday:2,
  detail_address:'',
  lng:'',
  lat:'',
  range:'',
  industry_id:'',
  charge_name:'',
  charge_phone:'',
  charge_safety_name:'',
  charge_safety_phone:'',
  citylist:[] as Array<any>,
  city_id:'',
  area_id:'',
  street_id:'',
  value1:[] as any
})
const validPhone = (rule, value, callback) => {
  const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!reg.test(value)) { //判断用户输入的值是否符合规则
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}
const rules = reactive({
  name:{ required: true, message: '请填写企业名称', trigger: 'blur' },
  citylist:{ required: true, message: '请选择企业地址', trigger: 'change' },
  city_id:{ required: true, message: '请选择企业地址', trigger: 'change' },
  area_id:{ required: true, message: '请选择区', trigger: 'change' },
  street_id:{ required: true, message: '请选择街道', trigger: 'change' },
  detail_address:{ required: true, message: '请填写详细地址', trigger: 'blur' },
  industry_id:{ required: true, message: '请选择所属行业', trigger: 'change' },
  lng:{ required: true, message: '请填写企业经度', trigger: 'blur' },
  lat:{ required: true, message: '请填写企业纬度', trigger: 'blur' },
  range:{ required: true, message: '请填写半径范围', trigger: 'blur' },
  work_time:{ required: true, message: '请选择上班时间', trigger: 'change' },
  after_work_time:{ required: true, message: '请选择下班时间', trigger: 'change' },
  value1:{ required: true, message: '请选择上,下班时间', trigger: 'change' },
  charge_name:{ required: true, message: '请填写主要负责人姓名', trigger: 'blur' },
  charge_safety_name:{ required: true, message: '请填写安全负责人姓名', trigger: 'blur' },
  charge_phone:{ validator: validPhone, trigger: 'blur' },
  charge_safety_phone:{ validator: validPhone, trigger: 'blur' },
})
let data = reactive({
   cities:[] as Array<any>,
   areas:[] as Array<any>,
   towns:[] as Array<any>
})
const ruleFormRef = ref<FormInstance>()
// 获取企业资料
const getInformation = () => {
  getCommonRegion().then(res => {
    if(res){
      regionData.value = res.result
    }
  })
  getCommonIndustry().then(res => {
    industry.value = res.result
  })
  proxy.$api.getInformation().then(res => {
    if(res?.code==200){
      for(let key in form){
        if(key == 'area_id' || key == 'city_id' || key == 'street_id'){
          form[key] = String(res.result[key])
        }else{
          form[key] = res.result[key]
        }
      }
      form.citylist = [res.result.city_id,res.result.area_id,res.result.street_id]
      form.id = res.result.id
      form.value1 = [res.result.work_time,res.result.after_work_time]
    }
  })
}
getInformation()

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      form.city_id = form.citylist[0]
      form.area_id = form.citylist[1]
      form.street_id = form.citylist[2]
      form.work_time = form.value1[0]
      form.after_work_time = form.value1[1]
      proxy.$api.getSetInformation(form).then(res => {
        if(res.code == 200){
          proxy.$message({
            type: 'success',
            message: res.msg,
          })
          formEl.resetFields()
          getInformation()
        }
      })
    } else {
      console.log('error submit!')
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang='scss' scoped>
.formbox{
  width: 40%;
}
.flex{
  width: 100%;
  display: flex;
  justify-content: space-between;
  span{
    margin: 0 5px;
  }
}
.formBtnbox{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
